<template>
  <!-- 表单组件，设置表单项的标签宽度，绑定表单数据和是否以行内形式显示 -->
  <el-form ref="form" label-width="100px" :model="form" :inline="inline">
    <!-- 循环渲染表单项 -->
    <el-form-item
      v-for="item in formLabel"
      :key="item.label"
      :label="item.label"
    >
      <!-- 根据不同的类型渲染不同的表单控件 -->
      <el-input v-if="item.type === 'input'" :placeholder="'请输入' + item.label" v-model="localForm[item.model]"></el-input>
      <el-switch v-if="item.type === 'switch'" v-model="localForm[item.model]"></el-switch>
      <el-select v-if="item.type === 'select'" placeholder="请选择" v-model="localForm[item.model]">
        <!-- 循环渲染选择项 -->
        <el-option v-for="opt in item.opts" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
      </el-select>
    </el-form-item>
    <!-- 插槽，用于插入额外的内容 -->
    <el-form-item><slot></slot></el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "CommonForm",
  // 定义组件的props
  props: {
    formLabel: Array, // 表单项的配置数组
    form: Object, // 表单数据对象
    inline: Boolean, // 是否以行内形式显示
  },
  data() {
    return {
      localForm: this.form // 本地表单数据，用于避免直接修改props
    }
  },
}
</script>

<style></style>